<style lang="less" scoped>
    .main_allScroll{
        background-color: #5a8dff;
    }
    .bgBox {
        position: relative;
        width: 100%;
        /*background-image: url("../../assets/img/qixiZone_bg.png");*/
        /*background-size: 100% auto;*/
        /*background-repeat: no-repeat;*/
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        z-index: -1;
        & > img {
            width: 100%;
        }
    }
    .listBox{
        width: 100%;
        padding: 0.24rem 0.32rem 0.6rem;
        margin-top: -4.1rem;
        li {
            width: 100%;
            /*border-radius: .55rem;*/
            /*box-shadow: 0 0 .18rem .05rem rgba(255, 180, 0, 0.61);*/
            margin-bottom: .24rem;
            display: flex;
            justify-content: center;
            align-items: center;
            /*overflow: hidden;*/
            position: relative;
            &:last-child {
                margin-bottom: 0;
            }
            img {
                width: 100%;
                text-align: center;
            }
            &:nth-child(n) img {
                width: 100%;
                position: relative;
                z-index: 1;
            }
        }
        .borderBox{
            position: absolute;
            bottom: -1.4%;
            left: -1%;
            width: 102%;
            height: 99%;
            /*border: .08rem solid #000;*/
            padding: .08rem;
            border-radius: 0.36rem;
        }
        .no_1_icon{
            width: .7rem;
            height: 1.08rem;
            background-image: url("../../assets/img/no_1.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            position: absolute;
            z-index: 2;
            right: 0;
            top: 0;
        }
        .no_2_icon{
            width: .7rem;
            height: 1.08rem;
            background-image: url("../../assets/img/no_3.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            position: absolute;
            z-index: 2;
            right: 0;
            top: 0;
        }
        .no_3_icon{
            width: .7rem;
            height: 1.08rem;
            background-image: url("../../assets/img/no_2.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            position: absolute;
            z-index: 2;
            right: 0;
            top: 0;
        }
        .borderBox.no_1{
            background-image: -webkit-linear-gradient(180deg, #ffef79, #c2800e); /* Safari 5.1 - 6.0 */
            background-image: -o-linear-gradient(180deg, #ffef79, #c2800e); /* Opera 11.1 - 12.0 */
            background-image: -moz-linear-gradient(180deg, #ffef79, #c2800e); /* Firefox 3.6 - 15 */
            background-image: linear-gradient(180deg, #ffef79,#c2800e);
        }
        .borderBox.no_2{
            background-image: linear-gradient(180deg, #efefef,#8e8e8e);
        }
        .borderBox.no_3{
            background-image: linear-gradient(180deg, #fab426,#9f4500);
        }
    }
</style>
<template>
    <div class="collage_tab">
        <v-header :title="title">
            <div slot="left" class="backs_icon"></div>
        </v-header>
        <div class="main_allScroll">
            <scroller :on-refresh="refresh" :on-infinite="loadMore ? infinite : getDone" ref="cityCallScroller">
                <div class="bgBox">
                    <img v-lazy="{src:bgImg}" alt="">
                </div>
                <ul class="listBox">
                    <li v-for="(v,i) in list" v-on:click="gotoPage(v)" v-if="v.activityImageUrl">
                        <div v-if="i == 0" class="no_1_icon"></div>
                        <div v-if="i == 1" class="no_2_icon"></div>
                        <div v-if="i == 2" class="no_3_icon"></div>
                        <div v-if="i < 3" class="borderBox" :class="i == 0 ? 'no_1':i == 1 ? 'no_2':i == 2 ? 'no_3':''"></div>
                        <img :src="v.activityImageUrl" :alt="v.templateActivityDescribe">
                    </li>
                </ul>
            </scroller>
        </div>
    </div>
</template>
<script>
  export default {
    name: 'cityCall',
    data() {
      return {
        title: '为你的城市打call',
        bgImg: require('../../assets/img/cityCallBg.png'),
        list: [],
        loadMore: false,
        pageNum: 1,
        scrollPos: 0,
      }
    },
      activated: function () {
        this.init()
      },
    deactivated: function(){
      this.scrollPos = this.$refs.cityCallScroller.getPosition().top
    },
      methods: {
        createInit() {
          this.list = []
          this.loadMore = false
          this.pageNum = 1
          this.scrollPos= 0
        },
        init(){
          if(this.$route.query.t){
            this.title = this.$route.query.t
            this.$route.meta.title = this.$route.query.t
              this.Interactive.customStatistics({type: 2, eventID: 'activity_area',map: {name: this.title}})
          }
          if(this.$router.isToNext){
            this.list = []
            this.loadMore = false
            this.pageNum = 1
            this.scrollPos= 0
            this.searchPagedPromotionTemplates()
          }else{
            if(this.scrollPos != 0){
              setTimeout(() => this.$refs.cityCallScroller.scrollTo(0, this.scrollPos, false), 10)
            }
          }
        },
          searchPagedPromotionTemplates(done){
              this.$ajax.activity.searchPagedHundredCityTemplates({
                  pageNum: this.pageNum,
                  pageSize: 15,
                  activityId: '475252186549321728'
              })
                  .then(res => {
                    if (done) {
                      done()
                    }
                    let type = Object.prototype.toString.call(res.body.content.list) === '[object Array]';
                    if (!type) {
                      this.loadMore = false
                      return
                    }
                    if (this.pageNum == 1) {
                      this.list = res.body.content.list
                    } else {
                      this.list = this.list.concat(res.body.content.list)
                    }
                    if (res.body.content.list.length == 0) {
                      this.loadMore = false
                    } else {
                      this.loadMore = true
                      this.pageNum++
                    }
                  })
          },
        gotoPage(data) {
          this.$router.push("/home/product_details?type=3" + "&templateId=" + data.templateId)
        },
        refresh(done) {
          global.myLoad = true
          this.createInit()
          this.$refs.cityCallScroller.resize()
          this.searchPagedPromotionTemplates(done)
        },
        infinite(done) {
          global.myLoad = true
          this.$refs.cityCallScroller.resize()
          this.loadMore = false
          this.searchPagedPromotionTemplates(done)
        },
        getDone(done) {
          this.$refs.cityCallScroller.finishInfinite(2);
        },
      }
  }
</script>